<template>
  <div>
    <el-row class="top">
      <el-col :span="1">
        <img src="../imgs/addlog.png" style="margin-left: 20px;margin-top: 16px"/>
      </el-col>
      <el-col :span="20" style="font-size: 21px;margin-top: 20px;margin-left: 10px">
        <span>{{this.culog.culTitle}}</span>
      </el-col>
    </el-row>
    <el-row class="log">
      <!-- 左侧 -->
      <el-col :span="14">
        <el-form :model="culog">
          <div class="left">
            <span style="color: #999999;margin-left: 20px">亲爱的{{userName}}，工作一天辛苦了！</span>
            <el-select v-model="culog.culName" value-key="culog.culName" style="width: 120px;margin-left:200px;padding: 10px">
              <el-option
                v-for="item in logs"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div style="width: 96%;border-top: 1px solid #D3DCE6;margin-left: 10px">
              <el-row style="margin-left: 10px;margin-top: 10px">
                <el-col :span="3" style="color: #999999">标题：</el-col>
                <el-col :span="12">
                  <el-input v-model="culog.culTitle" placeholder="请输入标题"></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-left: 10px;margin-top: 20px;margin-bottom: 10px">
                <el-col :span="3" style="color: #999999">内容：</el-col>
                <el-col :span="20">
                  <el-input v-model="culog.culOutline" type="textarea" :rows="12" placeholder="请填写工作总结"></el-input>
                </el-col>
              </el-row>
              <el-row style="margin-top: 20px;margin-bottom: 10px" v-show="updateShow">
                <el-button type="primary" @click="saveLog" size="small" style="margin-left: 430px;">保存</el-button>
                <router-link :to="{path:'/log'}">
                   <el-button size="small" style="margin-left: 10px;">取消</el-button>
                </router-link>
              </el-row>
            </div>
          </div>
        </el-form>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="10">
        <div class="right">
          <el-row style="margin-left: 40px;margin-top: 40px">
            当日工作总汇
          </el-row>
          <el-row style="margin-top: 10px">
            <div style="width: 92%;border-top: 1px solid #D3DCE6;margin-left: 20px">
              <el-row style="margin-left: 20px;margin-top: 20px">销售简报</el-row>
              <el-row style="margin-left: 40px;margin-top: 30px">
                <el-col :span="3" style="margin-left: 30px">新增客户</el-col>
                <el-col :span="3" style="margin-left: 30px">新增联系人</el-col>
                <el-col :span="3" style="margin-left: 30px">新增商机</el-col>
                <el-col :span="3" style="margin-left: 30px">沟通日志</el-col>
              </el-row>
              <el-row style="margin-left: 40px;margin-top: 20px">
                <el-col :span="3" style="margin-left: 30px">0个</el-col>
                <el-col :span="3" style="margin-left: 30px">0个</el-col>
                <el-col :span="3" style="margin-left: 30px">0个</el-col>
                <el-col :span="3" style="margin-left: 30px">5个</el-col>
              </el-row>
            </div>
          </el-row>
          <el-row style="margin-top: 10px;margin-bottom: 30px">
            <div style="width: 92%;border-top: 1px solid #D3DCE6;margin-left: 20px">
              <el-row style="margin-left: 20px;margin-top: 20px">交易</el-row>
              <el-row style="margin-left: 40px;margin-top: 30px">
                <el-col :span="6" style="margin-left: 30px">签订合同</el-col>
                <el-col :span="6" style="margin-left: 30px">回款总金额</el-col>
              </el-row>
              <el-row style="margin-left: 40px;margin-top: 20px">
                <el-col :span="6" style="margin-left: 30px;color:#4FA1E4">0个</el-col>
                <el-col :span="6" style="margin-left: 30px">0元</el-col>
              </el-row>
            </div>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'AsAddLog',
  data: function () {
    return {
      culog:{
        culId:'',
        culTitle:'',
        culOutline:'',
        culStatus:'',
        culTime:'',
        culName:'',
        culDelete:'',
        empByEmployeesId:{
          employeesId:'',
          empName:''
        }
      },
      title: '',  //日志标题
      logType: 1, //下拉框默认选项
      user: {},
      employeesId:'',
      userName: '',
      updateShow: '',
      logs: [{
        value: 1,
        label: '日报'
      }, {
        value: 2,
        label: '周报'
      }, {
        value: 3,
        label: '月报'
      }]
    }
  },
  created: function () {
    this.init();
    this.user = JSON.parse(sessionStorage.getItem('user'));
    this.userName = this.user.empName;//当前登录用户名
  },
  methods: {
    init(){//数据回显
      var culId = this.$route.query.culId;
      if(culId != undefined || culId == ''){
        this.$axios.get("http://localhost:8088/log/check-log",
          {params:{culId:culId}}
        ).then(v=>{
          this.culog = v.data;
          this.updateShow = false;
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      }else{
        this.updateShow = true;
      }
    },
    saveLog () {
      this.employeesId = this.user.employeesId;//当前登录用户id
      if(this.employeesId != '' && this.employeesId != ''){
        this.culog.empByEmployeesId.employeesId = this.employeesId;
        this.$axios.post("http://localhost:8088/log/save-log",{
          culId:this.culog.culId,
          culTitle:this.culog.culTitle,
          culOutline:this.culog.culOutline,
          culStatus:this.culog.culStatus,
          culTime:this.culog.culTime,
          culName:this.culog.culName,
          culDelete:this.culog.culDelete,
          empByEmployeesId:this.culog.empByEmployeesId
        }).then(()=>{
          this.$message.success("新增成功");
          this.$router.push({
            path:'/log'
          })
        }).catch(v=>{
          alert("访问失败!"+v.data);
        })
      }
    }
  },
  watch:{
    $route(){//跳转到该页面后需要进行的操作
      this.culog = {
        culId:'',
        culTitle: '',
        culOutline: '',
        culStatus: '',
        culTime: '',
        culName:''
      };
      this.init();
    }
  }
}
</script>

<style scoped>
  .top{
    border: 1px solid #D3DCE6;
    width: 100%;
    height: 70px;
    margin-bottom: 10px;
    background: white;
  }
  .left{
    width:98%;
    border: 1px solid #D3DCE6;
    background: white;
  }
  .right{
    width:100%;
    border: 1px solid #D3DCE6;
    background: white;
  }
</style>
